<template>
    <div>
      <h2>Todo List</h2>
      <input type="text" v-model="newTodo" @keyup.enter="addTodo" placeholder="Add a new task">
      <button @click="addTodo">Add</button>
  
      <ul>
        <li v-for="(todo, index) in todos" :key="index">
          <input type="checkbox" v-model="todo.completed">
          <span :class="{ completed: todo.completed }">{{ todo.text }}</span>
          <button @click="removeTodo(index)">Remove</button>
        </li>
      </ul>
    </div>
  </template>
  
  <script setup>
  import { ref } from 'vue';
  
  const newTodo = ref('');
  const todos = ref([]);
  
  function addTodo() {
    if (newTodo.value.trim() !== '') {
      todos.value.push({
        text: newTodo.value,
        completed: false
      });
      newTodo.value = '';
    }
  }
  
  function removeTodo(index) {
    todos.value.splice(index, 1);
  }
  </script>
  
  <style>
  .completed {
    text-decoration: line-through;
  }
  </style>
  